<!-- 微信授权信息 mpAuthorization  -->
<template>
  <view class="popwrap">
    <!-- 标题栏 -->
    <view class="head-box">
        <view class="head-title">欢迎来到{{ appInfo.name }}</view>
        <view class="head-subtitle">建议使用您的微信头像和昵称，以便获得更好的体验</view>
    </view>
    <view class="popform">
    <!-- 表单项 -->
    <uni-forms
      ref="accountLoginRef"
      v-model="state.formData"
      :rules="state.rules"
      validateTrigger="bind"
      labelWidth="160"
      labelAlign="left"
    >
      <uni-forms-item name="avatar" label="头像" required >
        <button
          class="avatar-btn"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
        >
          <image
            class="avatar-img"
            :src="sheep.$url.cdn(state.formData.avatar)"
            mode="aspectFill"
            @tap="sheep.$router.go('/pages/user/info')"
          ></image>
          <image class="camera" :src="`${baseUrl}/uploads/uniapp_image/user/xxj.png`" mode="scaleToFill"/>
        
        </button>
      </uni-forms-item>
      <uni-forms-item name="nickname" label="昵称" required>
        <uni-easyinput
          type="nickname"
          placeholder="请输入昵称"
          v-model="state.formData.nickname"
          :inputBorder="false"
          @blur="blurname"
        >
        </uni-easyinput>
      </uni-forms-item>

      <view class="foot-box">
        <button class="authorization-btn" @tap="onConfirm"> 确定 </button>
        <!-- <view class="text" @click="closepop">暂不登录</view> -->
      </view>
    </uni-forms>
  </view>
  </view>
</template>

<script setup>
  import { baseUrl } from '@/sheep/config';
  import { computed, ref, reactive } from 'vue';
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';

  onLoad((options) => {
    if(options) {
      share_options = options.share_options
    }
  })  
  let share_options = {}

  const appInfo = computed(() => sheep.$store('app').info);
  const emits = defineEmits(['closepop','sharingParameter']);
  const props = defineProps({
    agreeStatus: {
      type: Boolean,
      default: false,
    },
  });

  const accountLoginRef = ref(null);

  uni.$once('getUserInfo', (info) => {
    state.formData.nickname = info.nickname
    state.formData.avatar = info.avatar
  });

  // 数据
  const state = reactive({
    formData: {
      nickname: '',
      avatar: '',
    },
    rules: {

    },
    disabledStyle: {
      color: '#999',
      disableColor: '#fff',
    },
  });
 
  // 选择头像
  function onChooseAvatar(e) {
    const tempUrl = e.detail.avatarUrl || '';
    uploadAvatar(tempUrl);
  }
  async function uploadAvatar(tempUrl) {
    if (!tempUrl) return;
    let { url } = await sheep.$api.app.upload(tempUrl, 'ugc');
    state.formData.avatar = url;
  }
  const blurname = async e => {
    state.formData.nickname = e.detail.value;
  }
  // 确认授权
  
  async function onConfirm() {
    const { formData } = state;
    const { nickname, avatar } = formData;

    if (!nickname) {
      sheep.$helper.toast('请输入昵称');
      return;
    }
    if (!avatar) {
      sheep.$helper.toast('请选择头像');
      return;
    }
    const { code, msg } = await sheep.$api.user.updateMpUserInfo(formData);
    if (code === 1) {
      sheep.$store('user').getInfo();
      sheep.$router.back()
      uni.$emit('sharingParameter',share_options)
      emits('closepop', false)
      return;
    }else {
      sheep.$helper.toast(msg);
    }
  }
  //关闭弹窗
 function closepop(){
  emits('closepop', false)
  return;
 }
</script>

<style lang="scss" scoped>
  //  弹窗
.popwrap {
  width: 100%;
  height: 600rpx;
  padding-bottom: 40rpx;

  .head-box {
    width: 90%;
    margin: 30rpx auto;
    .head-title {
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: $uni-font-weight;
      font-size: 38rpx;
      margin-bottom: 12rpx;
    }
    .head-subtitle {
      color: #999999;
      font-weight: 500;
     font-size:$uni-font-size-26;
    }
  }
  .content-box{
    width: 90%;
    margin: 0 auto;

  }
}
.popform{
  width: 90%;
  margin: 20rpx auto;
  text{
    color: #666;
  }
  .avatar-btn{
    width: 118rpx;
    height: 118rpx;
    padding: 3rpx;
    border-radius: 50%;
    background: $uni-bg-color;
    border: 4rpx solid $uni-color-primary;
    position: relative;
    margin-left: 0rpx;
    overflow: inherit;
    &::after{border: none;}
    image{
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .camera{
      position: absolute;
      bottom: 0rpx;
      right: 0rpx;
      z-index: 5;
      border-radius: 50%;
      width: 38rpx;
      height: 38rpx;
    }
  }

}



.foot-box{
  .text{color: #999;
font-size: $uni-font-size-base;
text-align: center;
display: block;
text-align: center;}
.authorization-btn{
  width: 94%;
height: 90rpx;
line-height: 90rpx;
text-align: center;
color: $uni-bg-color;
font-weight: 500;
font-size: $uni-font-size-big;
margin: 28rpx 0 0;
border-radius: 50rpx;
background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
}
}

</style>
